import React, { useRef, useState } from 'react';
import { LaptopOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { theme, Tabs, Layout, Menu } from 'antd'
import { useNavigate } from 'react-router-dom'
import './addPeople.scss'
import Home from '@/pages/home';
import Account from '@/pages/account';
const { Header, Content, Sider } = Layout;


function AddPeople() {
    const navigate = useNavigate()
    const menuList = [
        {
            key: `1`,
            icon: React.createElement(UserOutlined),
            label: "添加人员信息",
            // children: <Home />
        },
        {
            key: `2`,
            icon: React.createElement(LaptopOutlined),
            label: "更新人员信息",
            // children: <Account />
        }
    ]
    const menuList1 = [
        {
            key: `1`,
            icon: React.createElement(UserOutlined),
            label: "添加人员信息",
            children: <Home />
        },
        {
            key: `2`,
            icon: React.createElement(LaptopOutlined),
            label: "更新人员信息",
            children: <Account />
        }
    ]
    const [activeKey, setActiveKey] = useState(menuList1[0].key);
    const [selectedKeys, setSelectedKeys] = useState(menuList1[0].key);
    const [items, setItems] = useState(menuList1);
    const newTabIndex = useRef;
    const datas = [
        {
            key: 1,
            label: "白名单管理"
        },
    ]

    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const onChange = (key) => {
        setActiveKey(key);
        setSelectedKeys(key)
    };
    const remove = (targetKey) => {
        const targetIndex = items.findIndex((pane) => pane.key === targetKey);
        const newPanes = items.filter((pane) => pane.key !== targetKey);
        if (newPanes.length && targetKey === activeKey) {
            const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
            setActiveKey(key);
            setSelectedKeys(key)
        }
        setItems(newPanes);
    };
    const onEdit = (targetKey, action, s) => {
        console.log(targetKey);
        if (action === 'add') {
            setItems([
                ...items,
                s
            ]);
            setActiveKey(targetKey);
        } else {
            if (items.length > 1) {
                remove(targetKey);
            } else {
                setActiveKey(targetKey)
            }

        }
    };
    const menuChange = (e) => {
        setSelectedKeys(e.key)
        menuList1.map((item) => {
            if (item.key === e.key) {
                let tabs = items.filter((item) => { return item.key === e.key })
                if (tabs.length === 0) {
                    onEdit(e.key, 'add', item)
                } else {
                    setActiveKey(e.key)
                }

            }
        })
    }
    const logout=()=>{
        navigate('/login')
    }

    return (
        <Layout className='p-layout'>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <div className="demo-logo" />
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={['1']}
                    items={datas}
                    style={{
                        flex: 1,
                        minWidth: 0,
                    }}
                />
                <div>
                    <LogoutOutlined className='L-logout' onClick={logout}/>
                </div>
            </Header>
            <Layout>
                <Sider
                    width={200}
                    style={{
                        background: colorBgContainer,
                    }}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['1']}
                        style={{
                            height: '100%',
                            borderRight: 0,
                        }}
                        items={menuList}
                        onClick={menuChange}
                        selectedKeys={selectedKeys}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: '0 15px 15px',
                    }}
                >
                    <Content
                        style={{
                            padding: 15,
                            margin: 0,
                            minHeight: 750,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Tabs
                            hideAdd
                            onChange={onChange}
                            activeKey={activeKey}
                            type="editable-card"
                            onEdit={onEdit}
                            items={items}
                        />
                    </Content>

                </Layout>
            </Layout>
        </Layout>
    )

}

export default AddPeople